<template>
	<div class="shopcart">
		<!--底部购物车栏-->
		<div class="content" @click="toggleList">
			<div class="content-left">
				<!--购物车logo-->
				<div class="logo-wrapper">
					<div class="logo" :class="{'highlight':totalCount>0}">
						<i class="icon-shopping_cart" :class="{'highlight':totalCount>0}"></i>
					</div>
					<!--选择食物个数-->
					<div class="count" v-show="totalCount>0">{{totalCount}}</div>
				</div>
				<!--总额-->
				<div class="total-price" :class="{'highlight':totalCount>0}">¥{{totalPrice}}</div>
				<!--描述-->
				<div class="desc">另需配送费¥{{deliveryPrice}}元</div>
			</div>
			<div class="content-right" @click.stop.prevent="pay">
				<!--起送费-->
				<div class="pay" :class="payClass">{{payDesc}}</div>
			</div>
		</div>
		<!--小球动画-->
		<transition-group
				name="drop"
				tag="div"
				class="ball-container"
		        @before-enter="dropBeforeEnter"
		        @enter="dropEnter"
		        @after-enter="dropAfterEnter"
		>
			<div v-for="ball in balls" v-show="ball.show" class="ball" :key="ball.id">
				<div class="inner inner-hook"></div>
			</div>
		</transition-group>
		<!--购物车列表-->
		<transition name="fold">
			<div class="shopcart-list" v-show="listShow">
				<div class="list-header">
					<h1 class="title">购物车</h1>
					<span class="empty" @click="empty">清空</span>
				</div>
				<div class="list-content" ref="listContent">
					<ul>
						<li class="food border-1px" v-for="food in selectFoods">
							<span class="name">{{food.name}}</span>
							<div class="price">
								<span>¥{{food.price*food.count}}</span>
							</div>
							<!--控制购物车组件-->
							<div class="cartcontrol-warpper">
								<cartcontrol :food="food"></cartcontrol>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</transition>
		<!--背景-->
		<transition name="fade">
			<div class="list-mask" v-show="listShow" @click="hideList"></div>
		</transition>
	</div>
</template>

<script type="text/ecmascript-6">
    import cartcontrol from 'components/cartcontrol/cartcontrol'
    import BScroll from 'better-scroll';
    
    export default {
	    props:{
	        //选择了什么食物
            selectFoods: {
                type: Array,
	            default() {
                    return [];
	            }
            },
	        //配送费
            deliveryPrice: {
                type:Number,
	            default:0
            },
		    //几远起送
            minPrice: {
                type:Number,
	            default:0
            }
	    },
		data() {
	      return {
	          balls: [
		          {
		              id:0,
		              show:false
		          },
                  {
                      id:1,
                      show:false
                  },
                  {
                      id:2,
                      show:false
                  },
                  {
                      id:3,
                      show:false
                  },
                  {
                      id:4,
                      show:false
                  },
	          ],
              //已经向下落的小球
              dropBalls:[],
		      //控制购物车是否折叠状态,默认是折叠的
		      fold:true
	      }
		},
		computed: {
	        //总价, 依赖于selectFoods
	        totalPrice() {
	            //原始值为0
	            let total = 0;
	            this.selectFoods.forEach((food) => {
	                //总价 = 食物单价 * 食物数量
	                total+= food.price * food.count
	            });
	            return total;
	        },
			//所有商品的总和
			totalCount() {
	            let count = 0;
	            this.selectFoods.forEach((food) => {
	                count += food.count;
	            })
				return count;
			},
			//描述信息
			payDesc() {
				//所以描述信息也是与selectFoods有关联
                //1.购物车为空,几几元起送
                if(this.totalPrice ===0){
				    return `¥${this.minPrice}起送`
				}
                //2.不够起送费时, 还差几几元起送
				else if(this.totalPrice < this.minPrice){
				    let diff = this.minPrice - this.totalPrice
                    return `还差¥${diff}元起送`
				}
                //3.够钱了!去结算~!
				else{
				    return '去结算';
				}
			},
			//购物车右面的样式
			payClass() {
	            if(this.totalPrice < this.minPrice) {
	                return 'not-enough'
	            }else{
	                return 'enough'
	            }
			},
			//控制购物车列表显示与隐藏
			listShow() {
	            //如果没有添加购物车,那是购物车是折叠的,
	            if(!this.totalCount) {
	                this.fold = true;
	                //购物车折叠, listShow就为false
	                return false;
	            }
	           
                    //如果是有totalCount的话
                    //也就是说,有添加食物到购物车
                    let show = !this.fold;
	                if(show) {
	                    //当列表需要展示时,要给better-scroll做初始化
		                //数据变了, dom的变化不会立即生效
		                this.$nextTick( () => {
		                    //判断是否存在this.scroll,没有几new一个
		                    if(!this.scroll){
                                this.scroll = new BScroll(this.$refs.listContent, {
                                    //支持点击事件
                                    click:true
                                });
		                    }else{
		                        //存在this.scroll,直接更新就好了
		                        this.scroll.refresh();
		                    }
		                   
		                });
	                }
                    //购物车不折叠, listShow就为true
                    return show;
	           
			}
		},
	    methods: {
	        //下落小球事件
	        drop(el) {
	            //参数el是当前点击的那个+1按钮
	            for(let i=0;i<this.balls.length;i++){
	                let ball=this.balls[i];
	                //如果ball.show为false的话
		            //就让ball.show为true,然后将当前点击的按钮元素加给ball这个对象上
	                if(!ball.show){
	                    ball.show=true;
	                    ball.el=el;
	                    //向dropBalls数组添加这个ball.show为true的ball
		                //然后下落的小球数组就有一个啦!
		                //然后直接return跳出循环
		                this.dropBalls.push(ball);
		                return;
	                }
	            }
	        },
		    //初始化滚动小球,先将滚动小球设置偏移到当前点击的按钮上
		    dropBeforeEnter(el) {
	            let count = this.balls.length;
	            while(count--) {
	                let ball=this.balls[count];
	                if(ball.show){
	                    //Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。
		                //获取点击的+1按钮的相对于视口的位置
		                //ball.el-->当前点击的+1按钮
	                    let rect = ball.el.getBoundingClientRect()
		                //设置滚动小球的偏移值
		                //滚动小球本来设置了定位, left32px bottom22px,所以要减掉
		                let x = rect.left-32
		                //设置小球top值
		                let y = -(window.innerHeight-rect.top-22)
		                
		                el.style.display = '';
	                    el.style.webkitTransform = `translate3d(0,${y}px,0)`
	                    el.style.transform=  `translate3d(0,${y}px,0)`
		                
		                let inner = el.getElementsByClassName('inner-hook')[0];
		               
		                inner.style.webkitTransform = `translate3d(${x}px,0,0)`
		                inner.style.transform = `translate3d(${x}px,0,0)`
	                }
	            }
		    },
		    //小球滚动动画结束状态
		    dropEnter(el) {
	            //保证dom实时更新
			    //达到看到动画更新的过程
                let rf=el.offsetHeight;
                
                this.$nextTick(() => {
                    el.style.display = '';
                    el.style.webkitTransform = 'translate3d(0,0,0)'
                    el.style.transform=  'translate3d(0,0,0)'

                    let inner = el.getElementsByClassName('inner-hook')[0];
                    inner.style.webkitTransform ='translate3d(0,0,0)'
                    inner.style.transform =  'translate3d(0,0,0)'
			    });
               
            },
		    //小球滚动后 , 将小球的显示变回原始状态
		    dropAfterEnter(el) {
	            //shift() 方法从数组中删除第一个元素，并返回该元素。此方法更改数组的长度。
	            let ball= this.dropBalls.shift();
	            if(ball){
	                ball.show = false;
	                el.style.display="none";
	            }
		    },
		    //购物车列表点击切换,是否展开
            toggleList() {
	            //购物车没东西,直接就return了
	            if(!this.totalCount){
	                return;
	            }
	            //有东西就根据this.fold做切换
	            this.fold=!this.fold;
		    },
		    //购物车展开后
            foldEnter(el,done) {
                el.style.webkitTransform = 'translate3d(0,-100%,0)'
                el.style.transform=  'translate3d(0,-100%,0)'
                done();
            },
		    //清空购物车
		    empty() {
	            this.selectFoods.forEach((food) => {
	                food.count =0;
	            })
		    },
		    //点击背景收藏购物车列表
		    hideList() {
	            this.fold=true;
		    },
		    //去结算
		    pay() {
	            //如果总价少于起送费,直接return
	            if(this.totalPrice < this.minPrice){
	                return;
	            }
	            window.alert(`支付${this.totalPrice}元`)
		    }
	    },
        components: {
            cartcontrol
        }
	};
</script>

<style lang="stylus" rel="stylesheet/stylus">
	@import "../../common/stylus/mixin";
	
	.shopcart
		position:fixed
		left:0
		bottom:0
		z-index:50
		width:100%
		height: 48px
		.content
			display :flex
			background: #141d27
			font-size:0
			color: rgba(255,255,255,0.4)
			.content-left
				flex:1
				.logo-wrapper
					display:inline-block
					vertical-align: top
					position:relative
					top: -10px
					margin: 0 12px
					padding:6px
					width: 56px
					height: 56px
					box-sizing :border-box
					border-radius :50%
					background: #141d27
					.count
						position:absolute
						top:0
						right:0
						width: 24px
						height: 16px
						line-height: 16px
						text-align: center
						border-radius :16px
						font-size: 9px
						font-weight:700
						color: #fff
						background: rgb(240,20,20)
						box-shadow :0px 4px 8px 0px rgba(0,0,0,0.4)
					.logo
						width:100%
						height: 100%
						border-radius :50%
						background :#2b343c
						text-align: center
						&.highlight
							background: rgb(0, 160, 220)
					.icon-shopping_cart
						font-size:24px
						color: #80858a
						line-height:44px
						&.highlight
							color: #ffffff
				.total-price
					display:inline-block
					vertical-align: top
					line-height: 24px
					margin-top:12px
					padding-right: 12px
					box-sizing :border-box
					border-right:1px solid rgba(255,255,255,0.1)
					font-size: 16px
					font-weight:700
					&.highlight
						color: #ffffff
				.desc
					display:inline-block
					vertical-align: top
					margin:12px 0 0 12px
					line-height: 24px
					font-size:10px
			.content-right
				flex:0 0 105px
				width:105px
				.pay
					height: 48px
					line-height: 48px
					text-align: center
					font-size: 12px
					font-weight:700
					background: #2b333b
					&.not-enough
						background: #2b333b
					&.enough
						background: #00b43c
						color: #fff
		/*小球动画*/
		.ball-container
			.ball
				position:fixed
				left: 32px
				bottom: 22px
				z-index:200
				.inner
					width: 16px
					height: 16px
					border-radius:50%
					background: rgb(0,160,220)
		/*小球动画设置*/
		.drop-enter-active , .drop-leave-active
			transition: all 0.3s cubic-bezier(0.49,-0.29,0.75,0.41)
			.inner
				transition: all 0.3s linear
		
		/*购物车列表*/
		.shopcart-list
			position:absolute
			left:0
			top:0
			z-index: -1
			width:100%
			transform:translate3d(0,-100%,0)
			.list-header
				height: 40px
				line-height: 40px
				padding:0 18px
				background: #f3f5f7
				border-bottom: 1px solid rgba(7,17,27,0.1)
				.title
					float: left
					font-size:14px
					color:rgb(7,17,27)
				.empty
					float: right
					font-size: 12px
					color: rgb(0,160,200)
		
			.list-content
				padding:0 18px
				max-height: 217px
				overflow:hidden
				background: #fff
				.food
					position:relative
					padding:12px 0
					box-sizing :border-box
					border-1px(rgba(7,17,27,0.1))
					.name
						line-height: 24px
						font-size: 14px
						color:rgb(7,17,27)
					.price
						position:absolute
						right: 90px
						bottom: 12px
						line-height: 24px
						font-size: 14px
						font-weight:700
						color: rgb(240, 20, 20)
					.cartcontrol-warpper
						position: absolute
						right: 0
						bottom: 6px
		/*购物车动画*/
		.fold-enter-active , .fold-leave-active
			transition:all 0.5s
		.fold-enter, .fold-leave-active
			transform:translate3d(0,0,0)
		.list-mask
			position:fixed
			top:0
			left: 0
			width:100%
			height: 100%
			z-index:-2 //小于shopcart的zindex
			opacity:1
			backdrop-filter :blur(10px)
			background:rgba(7,17,27,0.6)
		/*背景动画*/
		.fade-enter-active , .fade-leave-active
			transition:all 0.5s
		.fade-enter, .fade-leave-active
			opacity:0
			background:rgba(7,17,27,0)

	
</style>